<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <!-- 移动端设置不缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客管理</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" th:href="@{/css/common.css}">
        <link rel="stylesheet" th:href="@{/css/admin/common-admin.css}">
    </head>
    <body>
        <!-- navbar -->
        <nav th:replace="_fragment::admin-navbar(1)"></nav>
        
        <!-- content -->
        <div>
            <div class="container">
                <div class="row m-container">
                    <div class="col-sm-8 col-sm-offset-2">
                        <!-- items -->
                        <div class="m-table">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>名称</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="type, iterStat: ${pages.getRecords()}">
                                        <td th:text="${iterStat.count + pages.offset()}"></td>
                                        <td th:id="'name-' + ${type.id}" th:text="${type.name}"></td>
                                        <td>
                                            <a class="btn btn-add" data-target="#submitModal" data-toggle="modal" th:onclick="'modifyType(' + ${type.id} + ')'" href="#">编辑</a>
                                            <a class="btn btn-delete" th:onclick="'deleteType(' + ${type.id} + ')'">删除</a>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="3">
                                            <div class="btn-group" role="group" th:if="${pages.total > 1}">
                                                <a th:class="${'btn btn-common ' + (pages.current > 1 ? '' : 'disabled')}" type="button" th:href="@{/admin/types(index=${pages.current - 1})}">上一页</a>
                                                <a th:class="${'btn btn-common ' + (pages.current < pages.pages ? '' : 'disabled')}" type="button" th:href="@{/admin/types(index=${pages.current + 1})}">下一页</a>
                                            </div>
                                            <a class="btn btn-default pull-right" data-target="#submitModal" data-toggle="modal" href="#">创建</a>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <!-- 提交表单 -->
                        <div class="modal fade"  id="submitModal" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h5 class="modal-title" id="myModalLabel">分类创建</h5>
                                    </div>
                                    <form id="formData" class="form-horizontal">
                                        <div class="modal-body">
                                            <input id="id" value="" hidden/>
                                            <label class="control-label col-lg-2" for="name">名称：</label>
                                            <div class="col-lg-9">
                                                <input type="text" id="name" placeholder="name" class="form-control" required>
                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                                            <a class="btn btn-success" id="submit" onclick="submitType()">提交</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>

        <!-- footer -->
        <footer th:replace="_fragment::footer"></footer>

        <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
        <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
        <script th:src="@{/js/common.js}"></script>
        <script th:src="@{/js/admin/types.js}"></script>
    </body>
</html>